<template>
	<view class="content">

		<view class="heng">
			<view class="" v-for="(item, idx) in options">
				<view :class="this_index == item.id ? 'yes' : 'no'" @tap="click_type(item.id)">
					{{item.name}}
				</view>
			</view>
		</view>

		<view style="margin-top: 250rpx;" v-if="this_index == 0">

			<image class="voucher" src="@/static/activity/apply/voucher/voucher.png" mode="" mode="widthFix"></image>

			<view class="middle">

				<view class="dis" style="padding-top: 100rpx;" v-if="lishi.length > 0">
					<view class="left">{{lishi[0].OrderNo}}</view>
					<view style="padding-left: 275rpx;">{{lishi[0].created_at.split(' ')[0]}}</view>
				</view>

				<view class="dis" style="padding-top: 16rpx;">
					<view class="left">{{user.chinaname}}</view>
					<view style="padding-left: 320rpx; padding-top: 6rpx;">******************</view>
				</view>

				<view style="padding-left: 138rpx; padding-top: 6rpx;">{{user.organization}}</view>

				<view style="padding-top: 80rpx; width: 80%; margin: 0 auto;">
					<view class="dis" style="justify-content: space-evenly;" v-for="(item, idx) in lishi">
						<view style="">{{item.fee_items}}</view>
						<view style="">{{item.traceNo}}</view>
						<view style="">{{item.created_at}}</view>
						<view style="">{{item.Price}}</view>
					</view>
				</view>

			</view>
		</view>

		<view style="margin-top: 250rpx;" v-if="this_index == 1">

			<image class="voucher" src="@/static/activity/apply/voucher/cyz.png" mode="" mode="widthFix"></image>

			<view class="participation">

				<view style="padding-left: 120rpx;">{{user.chinaname}}</view>
				<view style="padding-left: 120rpx; padding-top: 2rpx;">{{user.organization}}</view>
				<view style="padding-left: 120rpx; padding-top: 4rpx;">{{lishi[0].OrderNo}}</view>
				<view style="padding-left: 150rpx; padding-top: 7rpx;">******************</view>
				<view style="padding-left: 170rpx;">人民币壹万元整（￥10000.00）</view>
				<view style="padding-left: 190rpx;">{{safeguard}}</view>
				<view style="padding-left: 150rpx;">0772-2596125、2592139</view>
				<view style="padding-left: 490rpx; padding-top: 135rpx;">{{safeguard}}</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: [],
				lishi: [],
				this_index: 0,
				options: [{
						id: 0,
						name: '缴费凭证'
					},
					{
						id: 1,
						name: '参与证'
					},
				],
				safeguard: null,
			}
		},
		onLoad() {
			this.user = uni.getStorageSync("member");
			console.log(this.user, 'user');
			this.lishijilu()
		},
		methods: {
			lishijilu() {
				let self = this
				// 获取当前日期
				let today = new Date();
				// 获取年份
				let year = today.getFullYear();
				// 获取月份（注意月份是从0开始计数的，所以要加1）
				let month = today.getMonth() + 1;
				// 获取日期
				let day = today.getDate();
				let demo2Val = year + '/' + month + '/' + day
				let url = '/hzj/get_order'
				let parm = {
					name: self.user.chinaname,
					pages: 1,
					price: 0,
					limit: 10000,
					sele_fee: null,
					uuid: self.user.uuid,
					time: {
						star_time: '2018/01/01',
						end_time: demo2Val
					},
					// token: '14d78037-08e3-49bf-b4ec-b8da61979af1'
					token: uni.getStorageSync("ttsxAuthToken")
				}
				self.$boya.NPost(url, parm, function(res) {
					uni.hideLoading();
					let shuju = res.data.data
					for (var i = 0; i < shuju.length; i++) {
						if (shuju[i].fee_items == '医疗互助金') {
							self.lishi.push(shuju[i])
						}
					}
					if (self.lishi[0].pay_time) {
						let dateStr = self.lishi[0].pay_time;
						let timestamp = new Date(dateStr).getTime();
						// 将时间戳增加一天（24小时）
						timestamp += 24 * 60 * 60 * 1000;
						// 创建新的Date对象，并设置为增加一天后的日期
						let newDate = new Date(timestamp);
						// 获取新日期的年、月、日
						let year = newDate.getFullYear();
						let month = newDate.getMonth() + 1; // 注意月份是从0开始计数的，所以要+1
						let day = newDate.getDate();
						// 拼接新日期的字符串
						self.safeguard =
							`${year}年${month < 10 ? '0' + month : month}月${day < 10 ? '0' + day : day}日`;
					}
					console.log('lishi: ', self.lishi);
				})
			},
			click_type(id) {
				this.this_index = id
				// this.data_list(id)
			},
		}
	}
</script>

<style>
	.content {
		width: 100vw;
		height: 100vh;
		background-color: rgba(221, 219, 232, 0.2);
	}
	
	.heng {
		margin-top: 100rpx;
		display: flex;
		justify-content: space-evenly;
	}

	.heng>view {
		width: 200rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 35rpx;
		font-weight: bold;
		border: 1px solid black;
		border-radius: 15rpx;
	}

	.yes {
		/* color: white; */
		background-color: #DDDBE8;
		border-radius: 15rpx;
		box-shadow: black 6rpx 6rpx 6rpx;
	}
	.voucher {
		width: 100vw;
		position: absolute;
	}

	.middle {
		position: relative;
		font-size: 16rpx;
	}

	.dis {
		display: flex;
	}

	.left {
		padding-left: 122rpx;
	}

	.participation {
		padding-top: 122rpx;
		position: relative;
		font-size: 16rpx;
	}
</style>